<template>
	<div class="Topic-Detail">
		<div class="top1" style="background-color: #fff;margin-bottom: 20px;padding: 20px;">
			<h2 style="padding: 10px 0">{{detail1.Name}}</h2>
			<p><span>简介:</span>{{detail1.Description}}</p>
			<p style="padding-bottom: 10px;"><span>上线时间:</span>{{detail1.FirstDateCode}}</p>
			<hr>
			<p style="padding-top: 10px;"><span>数据统计时间:</span>{{detail1.UpdateTime}}</p>
			<ul>
				<li>
					<span>浏览次数</span>
					<p>{{detail1.ViewCount | moneyFormat}}</p>
				</li>
				<li>
					<span>讨论次数</span>
					<p>{{detail1.DiscussCount | moneyFormat}}</p>
				</li>
				<li>
					<span>点赞数</span>
					<p>{{detail1.LikeCount}}</p>
				</li>
				<li>
					<span>收藏数</span>
					<p>{{detail1.FavCount}}</p>
				</li>
				<li>
					<span>分享数</span>
					<p>{{detail1.ShareCount}}</p>
				</li>
			</ul>
		</div>

		<div class="top2">
			<p style="border-bottom: 1px solid #eee;margin-bottom: 30px;">
				<span style="border-bottom: 4px solid  #5a309e;padding: 6px;color: #5a309e;">相关视频</span>
			</p>
			<div style="display: flex;margin-bottom: 20px;">
				<el-tabs type="border-card">
					<el-tab-pane label="7"></el-tab-pane>
					<el-tab-pane label="15"></el-tab-pane>
					<el-tab-pane label="30"></el-tab-pane>
					<el-tab-pane label="90"></el-tab-pane>
				</el-tabs>
				<div class="block" style="margin-left: 20px;">
					<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期">
					</el-date-picker>
				</div>
			</div>
			<div>
				<input class="inp" placeholder="请输入视频标题" v-model="Inp" @keyup.enter="Inpfun(Inp)"/>
				<button type="button" class="btn" @click="Inpfun(Inp)">搜索</button>
			</div>
			<div style="padding: 10px 0;">
				<span style="padding-right: 30px;">视频分类:</span>
				<span class="active" style="padding: 2px 8px;">全部</span>
				<span style="margin: 0 10px;width: 80px;" v-for="(item,index) in detail2" :key="index"
					class="'num'=='current'?'active':''">{{item.Name}}({{item.Count}})</span>
			</div>

		</div>

		<div class="con" style="background-color: #fff;padding:0 20px;">

			<el-table :data="detail3.ItemList">
				<el-table-column label="视频信息" prop="AId" width="700">
					<template slot-scope="scope">
						<div style="display: flex;">
							<div style="padding: 10px;">
								<img :src="'/bfs'+scope.row.LogoUrl.substr(23)"
									style="padding: 10px;width: 160px;height: 100px;">
							</div>
							<div style="padding-top: 24px;">
								<p>
									<span
										style="width: 300px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display: inline-block;vertical-align: middle;">{{scope.row.Title}}</span>
									<span
										style="padding: 2px 4px;color: #8a9eb5;border: 1px solid #8a9eb5;margin: 0 10px;vertical-align: middle;"
										v-if="scope.row.CopyRight">{{scope.row.CopyRight}}</span>
									<span
										style="color: #fa3b5a;border: 1px solid #fa3b5a;padding: 2px 4px;vertical-align: middle;">活动</span>
								</p>
								<p>
									{{scope.row.Author}}
								</p>
								<p>发布于: {{scope.row.PubTime}}</p>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="播放数" width="140" align="center">
					<template slot-scope="scope">
						{{scope.row.ViewCount | moneyFormat}}
					</template>
				</el-table-column>
				<el-table-column prop="name" label="三连数" width="160" align="center">
					<template slot-scope="scope">
						点赞量:{{scope.row.LikeCount|moneyFormat}}<br>
						收藏量:{{scope.row.FavoriteCount|moneyFormat}}<br>
						投币量:{{scope.row.CoinCount|moneyFormat}}<br>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="评论数" width="140" align="center">
					<template slot-scope="scope">
						{{scope.row.ReplyCount|moneyFormat}}
					</template>
				</el-table-column>
				<el-table-column prop="name" label="弹幕数" width="140" align="center">
					<template slot-scope="scope">
						{{scope.row.DanmuCount|moneyFormat}}
					</template>
				</el-table-column>
				<el-table-column prop="name" label="分享数" width="140" align="center">
					<template slot-scope="scope">
						{{scope.row.ShareCount|moneyFormat}}
					</template>
				</el-table-column>
			</el-table>

		</div>

		<div class="pagination" style="text-align: center;">
			<el-pagination background layout="prev, pager, next" :total="this.detail3.TotalCount"
				:current-page="currentPage" @current-change="handleCurrentChange">
			</el-pagination>
		</div>

	</div>
</template>

<script>
	import {
		Getdetail1,
		Getdetail2,
		Getdetail3
	} from '@/api/intelbras.js'
	export default {
		data() {
			return {
				detail1: {},
				detail2: {},
				detail3: [],
				value1: '',
				arg: '',
				current: 0,
				currentPage: 1,
				activeName: '1',
				id: this.$route.params.id,
				Inp: ''
			}
		},
		created() {
			this.getdetail1()
			this.getdetail2()
			this.getdetail3()
		},
		methods: {
			Inpfun(e) {
				Getdetail3({
						BeginCode: 20220726,
						EndCode: 20220809,
						KeyWord: e,
						SortType: 8,
						TopicId: this.$route.params.id,
						PageIndex: 1,
						PageSize: 10,
					})
					.then(res => {
						this.detail3 = res.data.Data
					})
					.catch(err => console.log(err))
			},
			handleCurrentChange(val) {
				Getdetail3({
						TopicId: this.$route.params.id,
						BeginCode: 20220725,
						EndCode: 20220808,
						SortType: 8,
						PageIndex: val,
					})
					.then(res => {
						this.detail3 = res.data.Data
					})
					.catch(err => console.log(err))

			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			getdetail1() {
				console.log(this.$route.params.id);

				Getdetail1(
						this.$route.params.id
					)

					.then(res => {
						this.detail1 = res.data.Data
						console.log(this.detail1, "分类1");
					})
					.catch(err => console.log(err))
			},
			getdetail2() {
				Getdetail2({
						TopicId: this.$route.params.id,
						BeginCode: 20220725,
						EndCode: 20220808,
						SortType: 8
					})
					.then(res => {
						this.detail2 = res.data.Data.CategoryStat
						console.log(this.detail2, "分类2");
					})
					.catch(err => console.log(err))
			},
			getdetail3() {
				Getdetail3({
						TopicId: this.$route.params.id,
						BeginCode: 20220725,
						EndCode: 20220808,
						SortType: 8
					})
					.then(res => {
						this.detail3 = res.data.Data
						console.log(this.detail3, "分类3");
					})
					.catch(err => console.log(err))
			},
		},
		filters: {
			//取截单元,单位
			moneyFormat: function(arg) {
				if (!arg) {
					arg = ''
				} else {
					if (arg.toString().length >= 13) {
						// return arg/1000000000000+"万亿"
						const moneys = arg / 1000000000000
						const realVal = parseFloat(moneys).toFixed(2);
						return realVal + "万亿"

					} else if (arg.toString().length >= 9) {
						const moneys = arg / 100000000
						const realVal = parseFloat(moneys).toFixed(2);
						return realVal + "亿"
					} else if (arg.toString().length >= 4) {
						const moneys = arg / 10000
						const realVal = parseFloat(moneys).toFixed(2);
						return realVal + "万"
					} else {
						const moneys = arg / 1
						const realVal = parseFloat(moneys).toFixed(0);
						return realVal
					}
				}


			}
		}
	}
</script>

<style>
	.Topic-Detail .active {
		background-color: #59309f;
		color: #fff;
	}

	.Topic-Detail .el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #59309f;
		color: #fff;
		border: none;
	}

	.Topic-Detail .el-pagination .btn-next .el-icon,
	.el-pagination .btn-prev .el-icon {
		border: 1px solid #c7ceda;
		padding: 6px 0px;
		background-color: #fff;
	}

	.Topic-Detail .el-pagination.is-background .el-pager li {
		border: 1px solid #c7ceda;
		margin: 0 10px;
	}

	.Topic-Detail .el-pagination.is-background .el-pager li:hover {
		color: #59309f;
	}

	.Topic-Detail .top1 {
		line-height: 2;
	}

	.Topic-Detail .top2 {
		line-height: 2;
		/* height: 400px; */
		background-color: #fff;
		padding: 20px;
	}

	.Topic-Detail .top2 .inp {
		height: 40px;
		width: 340px;
		line-height: 40px;
		text-indent: 10px;
		vertical-align: middle;
		outline: none;
		border: 1px solid #59309f;
	}

	.Topic-Detail .top2 .btn {
		width: 70px;
		height: 40px;
		line-height: 40px;
		vertical-align: middle;
		color: #fff;
		background-color: #59309f;
	}


	.Topic-Detail .el-tabs {
		width: 398px;
	}

	.Topic-Detail .el-tabs__content {
		display: none;
	}

	.Topic-Detail .el-range-separator {
		width: 20px;
	}

	.Topic-Detail .el-tabs__item {
		width: 100px;
		text-align: center;
	}

	.Topic-Detail .top1 span {
		color: #b9bac5;
		padding-right: 10px;
	}

	.Topic-Detail .top1 ul {
		display: flex;
		width: 50%;
		justify-content: space-between;
	}
</style>
